<template>
  <el-menu
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <!-- 1. LOGO -->
    <img src="../assets/imgs/logo.png" style="float: left; margin: 15px" >

    <!-- 2. 导航菜单 -->
    <el-menu-item index="/welocome" style="margin-left: 100px">首页</el-menu-item>
    <el-menu-item v-for="menu in menuList"
                  :index="menu.index"
                  :key="menu.index">{{ menu.name }}</el-menu-item>

    <!-- 3. 退出按钮 -->
    <i class="el-icon-switch-button logout"></i>
  </el-menu>
</template>

<script>
  export default {
    name: "EtoakHeader",
    props: {
      menuList: {
        type: Array,
        default: []
      }
    }
  }
</script>

<style scoped>
.logout {
  font-size: 40px;
  color: #FFF;
  margin: 10px 30px;
  float: right;
}
</style>